<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <p>username--->{{username}}</p>
    <p>age--->{{age}}</p>
    <hr/>
    <child sex="男" :age="age" :username="username"></child>
</div>
</body>
<script>
    // 父向子传递参数通过属性。
    // 父：如何传,在使用组件时增加属性。
    //    <child sex="男" :age="age" :username="username"></child>
    // 子：如何接收
    //    需要配置props
    // 注意：属性不允许直接修改。
    // 注意：filters，data,computed 不要与属性名相同
	new Vue({
		el:"#root",
        data:{
			age:12,
            username:"zhangsan",
        },
        components:{
			Child:{
				props:["sex","username","age"],
                data(){
					const num = this.age+100;
					return {
						num:this.age,
                        age:200
                    }
                },
				template:(`
				    <div>
				        <h3>Child</h3>
				        <p>username:{{username}}</p>
				        <p>age:{{age}}</p>
				        <p>sex:{{sex}}</p>
				        <p>num:{{num}}</p>
				        <button @click="fn">点我</button>
                    </div>
				`),
                methods:{
					fn(){
						// console.log("fn",this)
                        // this.age = 200;
                    }
                }
            }
        }
	})
</script>
</html>